<script setup>
import {ref} from "vue";

const dateValue = ref("None");
const timeValue = ref("None");
const anotherDateValue = ref("None");
const anotherTimeValue = ref("None");

const clearDate = () => {
  dateValue.value = " ";
  timeValue.value = " ";
};

const clearAnotherDate = () => {
  anotherDateValue.value = " ";
  anotherTimeValue.value = " ";
};
</script>

<!--Mission Editor下半部分的左边内容-->
<!--包含上方两个按钮、中间下拉框、两个输入框、下方两个按钮-->
<template>
  <div id="missDLeft">

    <!--上方按钮-->
    <div>
      <!--第一行按钮-->
      <div class="MissD-button-area">
        <button class="create-button">
          Create New Mission
        </button>
      </div>
      <!--第二行按钮-->
      <div class="MissD-button-area">
        <button class="delete-button">
          Delete Mission
        </button>
      </div>
    </div>

    <!--中间区域：下拉框+选项区域-->
    <div>
      <!--下拉框-->
      <el-col :span="24" class="MissD-dropdown">
        <span style="margin-left: 5px">Status:</span>
        <select class="MissD-dropdown-option">
          <option value="option1">Option 1</option>
          <option value="option2">Option 2</option>
          <option value="option3">Option 3</option>
        </select>
      </el-col>

      <!-- 选项区域 -->
      <el-col :span="24" style="margin-bottom: 180px">
        <!-- Activation Time区域 -->
        <div class="border">
          <div class="border-title">
            <span>Activation Time</span>
          </div>
          <div class="op-up">
            <!-- 第一行文字 -->
            <div class="input-row">
              <span>Date:</span>
              <input v-model="dateValue">
              <button @click="clearDate">Clear</button>
            </div>
            <!-- 第二行文字 -->
            <div class="input-row">
              <span>Time:</span>
              <input v-model="timeValue">
            </div>
          </div>
        </div>


        <!-- Deactivation Time区域 -->
        <div class="border">
          <div class="border-title">
            <span>Deactivation Time</span>
          </div>
          <div class="op-down">
            <!-- 第一行文字 -->
            <div class="input-row">
              <span>Date:</span>
              <input v-model="anotherDateValue">
              <button @click="clearAnotherDate">Clear</button>
            </div>
            <!-- 第二行文字 -->
            <div class="input-row">
              <span>Time:</span>
              <input v-model="anotherTimeValue">
            </div>
          </div>
        </div>
      </el-col>
    </div>

    <!--下方按钮-->
    <div>
      <!--第一行按钮-->
      <div class="missDL-down-button">
        <button class="missionD-button">
          Mission Doctrine, EMCON, WRA
        </button>
      </div>
      <!--第二行按钮-->
      <div class="missDL-down-button">
        <button class="escortD-button">
          Escort Doctrine, EMCON, WRA
        </button>
      </div>
    </div>

  </div>
</template>

<style>
#missDLeft {
  position: relative;
  border: 1px solid white;
  padding: 5px 3px;
  height: 450px;
  font-size: 10px;
}

/*上方按钮区域*/
.MissD-button-area, .missDL-down-button {
  display: flex;
  justify-content: space-between;
}

.create-button, .missionD-button {
  width: 100%;
  background-color: rgba(60, 63, 65, 0.42);
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
  font-size: 10px;
}

.delete-button, .escortD-button {
  flex: 1;
  background-color: rgba(60, 63, 65, 0.42);
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
  font-size: 10px;
}

/*下拉框*/
.MissD-dropdown {
  display: flex;
  align-items: center;
  margin-top: 10px;

}

.MissD-dropdown-option {
  width: 78%;
  padding: 0 5px;
  margin-left: 3px;
  font-size: 10px;
  background: radial-gradient(#1a1a1a, #242424);
  color: white;
  border: none;
}

.MissD-dropdown-option:focus {
  background: #1a1a1a;
  color: white;

}

/*选项框区域*/
.border {
  width: 100%;
  font-size: 10px;
  margin-top: 12px;
  border: 1px solid white;
  border-radius: 2px;
}

.border-title {
  width: 35%;
  margin-top: -8px;
  vertical-align: middle;
  margin-left: 5px;
  padding-left: 8px;
  background-color: rgb(60, 63, 65);
}

.input-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;

}

.input-row span {
  margin-right: 10px;

}

.input-row input {
  width: 45%;
  background-color: #1a1a1a;
  color: white;
  border: none;
  font-size: 10px;
}

.op-up button, .op-down button {
  background-color: rgba(60, 63, 65, 0.42);
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-left: 30px;
  font-size: 10px;
}


</style>